﻿@using System.Linq
@model FinanceChecker.DataTransferObject.ExpenseViewModel

<div class="container mt-5">
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header custom-header">
                    <h3>MY ACCOUNTS</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <div class="card mb-3">
                                <div class="card-header d-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#bankAccounts" aria-expanded="false">
                                    <h4>Bank Accounts</h4>
                                    <h5>Balance: £@ViewBag.BankAccountBalanceCurrentDay.ToString("N2")</h5>
                                    <span class="arrow-icon"></span>
                                </div>
                                <div class="collapse" id="bankAccounts">
                                    <div class="card-body">
                                        @foreach (var account in Model.Accounts.Where(a => a.AccountType == "BankAccount"))

                                        {
                                            <div class="account-details">
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <div>
                                                        <h6>Balance: £@account.Balance.ToString("N2")</h6>
                                                    </div>
                                                    <div>
                                                        <h6>Institution: @account.InstitutionName</h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr />
                                        }

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="card mb-3">
                                <div class="card-header d-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#creditCardAccounts" aria-expanded="false">
                                    <h4>Credit Card Accounts</h4>
                                    <h5>Balance: £@ViewBag.CreditCardBalanceCurrentDay.ToString("N2")</h5>
                                    <span class="arrow-icon"></span>
                                </div>
                                <div class="collapse" id="creditCardAccounts">
                                    <div class="card-body">
                                        @foreach (var account in Model.Accounts.Where(a => a.AccountType == "CreditCard"))

                                        {
                                            <div class="account-details">
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <div>
                                                        <h6>Balance: £@account.Balance.ToString("N2")</h6>
                                                    </div>
                                                    <div>
                                                        <h6>Institution: @account.InstitutionName</h6>
                                                    </div>


                                                </div>
                                            </div>
                                            <hr />
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="card mb-3">
                                <div class="card-header d-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#investmentAccounts" aria-expanded="false">
                                    <h4>Investment Accounts</h4>
                                    <h5>Balance: £@ViewBag.InvestmentBalanceCurrentDay.ToString("N2")</h5>
                                    <span class="arrow-icon"></span>
                                </div>
                                <div class="collapse" id="investmentAccounts">
                                    <div class="card-body">
                                        @foreach (var account in Model.Accounts.Where(a => a.AccountType == "Investment"))

                                        {
                                            <div class="account-details">
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <div>
                                                        <h6>Balance: £@account.Balance.ToString("N2")</h6>
                                                    </div>
                                                    <div>
                                                        <h6>Institution: @account.InstitutionName</h6>
                                                    </div>


                                                </div>
                                            </div>
                                            <hr />
                                        }

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container for User Expenses per Category Pie Chart -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header custom-header">
                    <h3>Monthly Spent per Category</h3>
                </div>
                <div class="card-body">
                    <canvas id="totalMonthlySpentPieChart" width="100%" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <!-- Container for User 5 Upcoming Bills -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header custom-header">
                    <h3>Upcoming Bills</h3>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        @foreach (var bill in ViewBag.UpcomingBills)
                        {
                            <li class="list-group-item">
                                <h6>@bill.BillName</h6>
                                <p>Due Date: @bill.DueDate.ToShortDateString()</p>
                                <p>Amount: £@bill.Amount.ToString("N2")</p>
                            </li>
                        }
                    </ul>
                </div>
            </div>
        </div>
        <!-- Container for User 5 Recent Transactions -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header custom-header">
                    <h3>Recent Transactions</h3>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        @foreach (var transaction in ViewBag.RecentTransactions)
                        {
                            <li class="list-group-item">
                                <h6>Description: @transaction.Description</h6>
                                <p>Date: @transaction.CreatedAt.ToShortDateString()</p>
                                <p>Amount: £@transaction.Amount.ToString("N2")</p>
                            </li>
                        }
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<br />

@section scripts {
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .custom-header {
            background-color: #007bff;
            color: white;
        }
    </style>

    <script>
        // Data for the pie chart
        var categoryMonthlySpent = @Html.Raw(Json.Serialize(Model.CategoryMonthlySpent));

        var pieChartData = {
            labels: Object.keys(categoryMonthlySpent), // Category names as labels
            datasets: [{
                data: Object.values(categoryMonthlySpent), // Total spent values for each category
                backgroundColor: getRandomColors(Object.keys(categoryMonthlySpent).length)
            }]
        };

        // Function to generate random colors for the pie chart
        function getRandomColors(count) {
            var colors = [];
            for (var i = 0; i < count; i++) {
                colors.push(getRandomColor());
            }
            return colors;
        }

        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // Create the pie chart
        var totalMonthlySpentPieChart = new Chart('totalMonthlySpentPieChart', {
            type: 'pie',
            data: pieChartData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    title: {
                        display: true,
                        text: 'Total Monthly Spent per Category'
                    }
                }
            }
        });
    </script>
}
<br />